import React from 'react'
import "./style.less"
import { useHistory } from "react-router-dom"

export default function Item ({ data }) {
  // console.log(data);
  const history = useHistory();

  function clickHandle () {
    history.push(`/details/${data.id}`)
  }


  return (
    <div className="list-item" onClick={clickHandle}>
      <img src={data.img} alt="" />
      <div className="mask">
        <div className="left">
          <p>{data.title}</p>
          <p>{data.houseType}</p>
        </div>
        <div className="right">
          <div className="btn">
            {data.rentType}
          </div>
          {/* 
                        innerHTML和innerText
                        dangerouslySetInnerHTML
                    */}
          <div dangerouslySetInnerHTML={{ __html: data.price + "元/月" }}></div>
        </div>
      </div>
    </div>
  )
}
